<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播</title>
  <style>
    #slider {
      width: 600px;
      height: 500px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
    }
    .item {
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      transition: left 0.7s ease-in-out;
    }
    /* 小圆点的共用样式 */
    .page-control {
      width: 10px;
      height: 10px;
      border: 1px solid #fff;
      border-radius: 50%;
      position: absolute;
      bottom: 20px;
      z-index: 6;
      cursor: pointer;
    }
    /* 小箭头的共用样式 */
    .arrow {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: rgba(250,250,250,0.2);
      position: absolute;
      top: 225px;
      background-image: url('./image/slide_next.png');
      background-position: -5px center;
      cursor: pointer;
      z-index: 6;
    }
    .right {
      right: 0;
      background-position: -60px center;
    }
  </style>
</head>
<body>
  <div id="slider">
    <img class="item" src="./image/111.jpg" alt="">
    <img class="item" src="./image/222.jpg" alt="">
    <img class="item" src="./image/333.jpg" alt="">
    <img class="item" src="./image/444.jpg" alt="">
    <img class="item" src="./image/111.jpg" alt="">
  </div>
  <script>
    // 初始化
    var page = 0;  
    let sWidth = slider.clientWidth;
    let imgs = document.getElementsByClassName('item');
    for(let i=0; i<imgs.length; i ++) {
      imgs[i].style.left = `${i * sWidth}px`
    }
    // 生成小圆点
    for(let i=0; i<imgs.length-1; i ++){
      let div = document.createElement('div');
      div.classList.add('page-control');
      div.index = i;
      slider.appendChild(div);
      // 结合律和分配律
      div.style.left = (sWidth/2+i*20)-((imgs.length-1)*10+(imgs.length-1-1)*10)/2+'px';
      // 依次绑定事件
      div.onclick = function(e) {
        // console.log(e.target.index)
        page = e.target.index-1;
        computed();
      }
    }
    // 默认给第一个小圆点加上背景颜色
    setBgColor(0);
    // 生成小箭头
    let leftArrow = document.createElement('div');
    leftArrow.classList.add('arrow');
    slider.appendChild(leftArrow);
    let rightArrow = document.createElement('div');
    slider.appendChild(rightArrow);
    rightArrow.classList.add('arrow', 'right');
    function computed() {
      page ++;
      if (page > imgs.length - 1 ){
				page = imgs.length - 1;
			}
      sliderMove();
    }
    // 给小箭头绑定事件
    leftArrow.onclick = function() {
      computed();
      clearInterval(timer);
      setInterval(() => {
        computed()
      }, 3000);
    }
    rightArrow.onclick = function() {
      page --;
      if (page<0 ){
				page = 0;
			}
      sliderMove();
      clearInterval(timer);
      setInterval(() => {
        computed()
      }, 3000);
    }
    function sliderMove(){
      for(let i=0; i<imgs.length; i ++) {
        imgs[i].style.left = `${(i-page) * sWidth}px`
      }
      if(page == imgs.length - 1) {
        setTimeout(() => {
          page = 0
          for (var index = 0; index < imgs.length; index++){
            imgs[index].style.left = index*sWidth + 'px';
            imgs[index].style.transition = 'none';
          }
          setTimeout(function(){
            for (var index = 0 ; index < imgs.length ; index++){
            imgs[index].style.transition = 'left 0.7s ease-in-out';
            }
          },100);
        }, 700);
      }
      setBgColor(page);
    }
    // 设置小圆点的背景颜色
    function setBgColor(num) {
      let pageControl = document.querySelectorAll('.page-control');
      for(let i=0; i<imgs.length-1; i ++) {
        pageControl[i].style.backgroundColor = '';
      }
      if(num == 4) {
        pageControl[0].style.backgroundColor = '#fff';
      }else {
        pageControl[num].style.backgroundColor = '#fff';
      }
    }
    // 清除定时器
    function clearTimer(t) {
      clearInterval(t)
    }
    var timer = setInterval(() => {
      computed()
    }, 3000);
  </script>
</body>
</html>